<template>
	<div class="list_box" :class="{ 'isclock': info.isClockIn == '1' }" @click="infoClick">
		<div class="oneline">
			<div class="oneline_left">
				<span class="oneline_text">{{ info.shortName || '暂无' }}</span>
			</div>
			<div class="oneline_right">
				<div class="list_title">
					<div class="list_title_left">
						{{ info.corpName }}
					</div>
					<div class="list_title_right" @click.stop="toClockClick(info)">
						<span>打卡</span>
						<!-- <van-icon name="arrow" /> -->
					</div>
				</div>
				<div v-if="info.corpCredit">
					<span class="list_label">统一信用代码</span>
					<span class="label_content">{{ info.corpCredit || '' }}</span>
				</div>
				<div v-if="info.customerNo">
					<span class="list_label">客户号</span>
					<span class="label_content">{{ info.customerNo || '' }}</span>
				</div>
				<div style="display: flex; align-items: center; margin: 10px 0">
					<div
						class="list_tag"
						:style="{ 'background-color': info.label.backgroundColor, 'color': '#fff' }"
					>
						{{ info.label.name }}
					</div>
					<span class="list_label" v-if="info.meetName">对接人</span>
					<span class="label_content"
						>{{ info.meetName || '' }}
						<span v-if="info.meetDuty">（{{ info.meetDuty || '' }}）</span></span
					>
				</div>
			</div>
		</div>
		<div class="two_line">
			<van-icon name="clock" size="14px" color="#989898" style="margin-right: 5px"/>
			<span class="label_content">{{ info.createTime || '' }}</span>
		</div>
		<div class="three_line">
			<van-icon name="location" size="14px" color="#989898"/>
			<span class="label_content addressspan">{{ info.area || '暂无' }}</span>
		</div>
	</div>
</template>
<script>
	export default {
		name: '',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {
			info: {
				type: Object,
				default: function () {
					return {};
				},
			},
		},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			infoClick() {
				this.$emit('infoClick', this.info);
			},
			toClockClick() {},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.list_box {
		margin: 0 25px;
		border-bottom: 1px solid #ededed;
		padding: 15px 0 5px 0;
	}

	.isclock {
		background-image: url(https://zx-1311146360.cos.ap-shanghai.myqcloud.com/zhonghang/page1_5.png);
		background-size: 87px 70px;
		background-repeat: no-repeat;
		background-position: 225px;
	}

	.oneline {
		display: flex;
	}

	.oneline_left {
		width: 32px;
		height: 32px;
		border-radius: 5px;
		background-color: #d99d9a;
		text-align: center;
		line-height: 16px;
		font-size: 12px !important;
		font-family: Source Han Sans SC;
		color: #ffffff;
		margin-right: 11px;
		margin-top: 3px;
		// width: 32px;
		// height: 32px;
		// display: flex;
		// position: relative;
		// background-color: #d99d9a;
		// border-radius: 5px;
		// justify-content: center;
		// align-content: center;
		// text-align: center;
		// font-size: 12px !important;
		// color: #ffffff;
		// border-radius: 5px;
		// flex-shrink: 0;
		// .oneline_text {
		// 	position: absolute;
		// 	top: 0;
		// 	bottom: 0;
		// 	left: 0;
		// 	right: 0;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-content: center;
		// 	text-align: center;
		// 	display: inline-block;
		// 	vertical-align: middle;
		// 	color: #ffffff;
		// 	font-size: 12px;
		// 	&::after {
		// 		content: '';
		// 		display: inline-block;
		// 		vertical-align: middle;
		// 		height: 100%;
		// 	}
		// }
		.oneline_text {
			// border: 1px solid red;
		}
	}

	.oneline_right {
		flex: 1;
	}

	.list_title {
		color: #000000;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list_title_left {
		flex: 1;
	}

	.list_title_right {
		margin-left: auto;
		width: 38px;
		height: 20px;
		background: #ffffff;
		border: 1px solid #3282e4;
		border-radius: 2px;
		color: #3282e4;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
	}

	.list_label {
		color: #989898;
		font-size: 12px;
		margin-right: 8px;
	}

	.label_content {
		color: #5f6269;
		font-size: 12px;
	}

	.list_tag {
		background: #4b8fe4;
		border-radius: 2px;
		color: white;
		font-size: 10px;
		padding: 5px 8px;
		margin-right: 8px;
	}

	.two_line,
	.three_line {
		display: flex;
		align-items: center;
		margin: 5px 0;
	}

	.two_line img,
	.three_line img {
		width: 11px;
		height: 11px;
		margin-right: 8px;
	}

	.addressText {
		display: block;
		width: 95%;
	}
</style>
